import React, { useState } from 'react'
import { Layout, Breadcrumb } from 'antd';
import { Outlet } from 'react-router-dom'
import Siders from '../components/Sider';
import '../assets/style/nav.css'
const { Header, Footer, Sider, Content } = Layout;
export default function NavPage() {
  const [name, setName] = useState('张三')
  // console.log(ef,'ef')
  const btn = () => {
    setName('李四')
  }
  const headerStyle = {
    color: '#fff',
    height: 64,
    lineHeight: '64px',
    backgroundColor: '#000000',

  };
  const contentStyle = {
    minHeight: 120,
    backgroundColor: '#eee'
  };
  const siderStyle = {
    color: '#fff',
    height: '100vh',
    backgroundColor: '#fff',
  };

  return (
    <div>
      <Layout>
        <Header style={headerStyle}><div className='headers'><div className='tit1'>蜗牛商城</div><div className='user'>
          <div className='uright'>个人中心</div>
          <div>退出登录</div>
        </div></div></Header>
        <Layout>
          <Sider style={siderStyle}><Siders ></Siders></Sider>

          <Content style={contentStyle}>
            <Breadcrumb
              items={[
                {
                  title: '首页',
                },
                {
                  title: <a href="">个人中心</a>,
                }
              ]}
            />
            <Outlet></Outlet>
          </Content>
        </Layout>

      </Layout>
    </div>
  )
}

